<script setup>
import { onMounted } from "vue";
import { getFacilityRealTimeData } from '@/api/agriculture'
import * as echarts from "echarts";
import agricultureBg1 from "../../../assets/images/agriculture-bg1.png";

const props = defineProps({
	facId: {
		type: [String, Number],
		default: null
	}
})

console.log(props)

let graph = $ref(null);
let eCharts = null;

let colors = ['#72AA5C', '#CBA908', '#0099FC', '#8B73E3', '#CCA90C', '#8A73E3', '#EE5D60', '#72AA5C', '#CBA908', '#0099FC', '#8B73E3', '#CCA90C', '#E57E16', '#8A73E3', '#EE5D60','#72AA5C', '#CBA908', '#0099FC', '#8B73E3', '#CCA90C', '#8A73E3', '#EE5D60', '#72AA5C', '#CBA908', '#0099FC', '#8B73E3', '#CCA90C', '#E57E16', '#8A73E3', '#EE5D60']

// 获取实时数据
let resData = $ref([])

let dataLoading = $ref(false)

const getData = () => {
	dataLoading = true
	getFacilityRealTimeData({ facId: props.facId }).then(res => {
		dataLoading = false
		resData = group(res.result, 298)
		init()
	})
}

// 连接线
let lineArr = []



onMounted(() => {
	// let pointArr = group([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}], 298);
	getData()
	

	// 	timer = setInterval(draw, 200);
});

const init = () => {
	let  data = [
		{
			name: "邹城市三仙山葡萄棚（东南角） \n\n设备ID：16019702",
			symbol:
				"image://",
			symbolSize: [298, 200],
			value: [0, 0],
			x: 300,
			y: 400,
		},
		// {
		// 	name: "PH值 \n\n8.25",
		// 	x: 400,
		// 	y: 400,
		// 	value: [130, 400],
		// 	symbol: "",
		// 	symbolSize: [108, 108],
		// 	itemStyle: {
		// 		color: colors[0],
		// 	}
		// }
		...resData
	];

	let option = {
		xAxis: {
			show: false,
			type: "value",
		},
		yAxis: {
			show: false,
			type: "value",
		},
		tooltip: {
			show: false,
		},
		series: [
			{
				type: "graph",
				zlevel: 5,
				draggable: false,
				coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
				label: {
					normal: {
						show: true,
						fontSize: 16,
						color: '#fff'
					},
				},
				data: data,
				// links: [
				// 	{
				// 		source: "邹城市三仙山葡萄棚（东南角） \n\n设备ID：16019702",
				// 		target: "PH值 \n\n8.25",
				// 	},
				// 	{
				// 		source: "邹城市三仙山葡萄棚（东南角） \n\n设备ID：16019702",
				// 		target: "土壤温度 \n\n29.5 C",
				// 	},
				// 	{
				// 		source: "邹城市三仙山葡萄棚（东南角） \n\n设备ID：16019702",
				// 		target: "土壤湿度 \n\n1.4%",
				// 	},
				// 	{
				// 		source: "邹城市三仙山葡萄棚（东南角） \n\n设备ID：16019702",
				// 		target: "分数据中心四",
				// 	},
				// ],
				lineStyle: {
					normal: {
						opacity: 1,
						color: "#53B5EA",
						curveness: 0.2,
						width: 2,
					},
				},
			},
			{
				type: "lines",
				coordinateSystem: "cartesian2d",
				z: 1,
				zlevel: 2,
				animation: false,
				effect: {
					show: true,
					period: 5,
					trailLength: 0.3,
					symbolSize: 26,
					symbol: "pin",
					loop: true,
					color: "rgba(55,155,255,0.5)"
				},
				// emphasis: {
				// 	lineStyle: {
				// 		type: "dashed",
				// 	},
				// },
				lineStyle: {
					normal: {
						color: "#2BFCFF",
						width: 2,
						curveness: 0.2,
						type: "dashed",
					},
				},

				data: lineArr,
				tooltip: {
					show: false
				}
			},
		],
	};

	eCharts = echarts.init(graph);
	eCharts.setOption(option);
}

// 圆形分区
const group = (arr, r) => {
	const newArray = [];
	const {
		length: arLen
	} = arr;
	arr.forEach((e, ind) => {
		// 按角度均匀分布
		const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1);
		const x = (Math.cos(ang * Math.PI / 180)).toFixed(2) * r;
		const y = (Math.sin(ang * Math.PI / 180)).toFixed(2) * r;
		const x1 = (Math.cos(ang * Math.PI / 180)).toFixed(2) * (r - 5);
		const y1 = (Math.sin(ang * Math.PI / 180)).toFixed(2) * (r - 5);
		const x0 = (Math.cos(ang * Math.PI / 180)).toFixed(2) * (r - 30);
		const y0 = (Math.sin(ang * Math.PI / 180)).toFixed(2) * (r - 30);
		e.value = [x.toFixed(2), y.toFixed(2)]
		e.twoPoint = [[x1.toFixed(2), y1.toFixed(2)], [x0.toFixed(2), y0.toFixed(2)]];
		e.symbolSize = [x.toFixed(2), y.toFixed(2)]


		newArray.push({
			name: e.name + '\n\n' + e.combination,
			x: 400,
			y: 400,
			value: [x.toFixed(2), y.toFixed(2)],
			symbol: "",
			symbolSize: [108, 108],
			itemStyle: {
				color: colors[ind],
			}
		});

		lineArr.push({
			coords: [
				[0, 0],
				[x.toFixed(2), y.toFixed(2)]
			]
		})
	});
	return newArray;
}
</script>

<template>
	<div ref="graph" class="agriculture-graph" v-loading="dataLoading"></div>
</template>

<style lang="less" scoped>
.agriculture-graph {
	width: 100%;
	height: 600px;
}
</style>